<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="user-scalable=no,width=device-width, initial-scale=1" id="viewport" name="viewport" initial-scale="1">

<script language="javascript" type="text/javascript" src="../js/js/baseJs.js"></script>

</head>
<body>

<div class="crowd-funding-project-detail" id="projectDetail" style="display: none; backgroud:#f5f5f5">
  <div class="wap-header">合伙创业详情
    <a class="back" onClick="javascript:window.history.back();return false;"></a>
  </div>
  <div class="crowd-funding-c">
     <div class="banner-c" > 
            <swiper v-ref:swiper="v-ref:swiper" direction="horizontal" 
            :mousewheel-control="false" 
            :performance-mode="true" 
            :pagination-visible="true" 
            :pagination-clickable="true"
            :loop="true">
                <div class="change-banner" v-for="image in imageList" >
                    <img :src="image.img"/>
                </div>
            </swiper>
      </div>
      <div class="crowd-funding-project-title-bd" style="background:#fff;padding-bottom: .4rem;"> 
         
          <div class="info"> 
            <div class="status">{{crowdFundingProjectData.status|status}}</div>
            <div class="creatTime">创建时间：{{crowdFundingProjectData.createTime|formatData}}</div>
          </div>
          <div class="title-c"> 
            <div class="title">{{crowdFundingProjectData.name}}</div>
            <div class="price-c"> 
              <div class="price">￥{{crowdFundingProjectData.price}}</div>
              <div class="people">
                <span >{{crowdFundingProjectData.joinNumber}}/</span>
                {{crowdFundingProjectData.number}}
              </div>
            </div>   
          </div>
          <div class="process">{{getProcess()}}</div>
      </div>
      <div class="content-bd"> 
         <div class="title">众筹详情：</div>
         <div class="c" v-if="crowdFundingProjectData.content">{{crowdFundingProjectData.content}}</div>
         <div v-else>暂无详情</div>
      </div>
      <div class="join-project-bt" v-if="!showJoinButton" @click="showJoinButton=true"> 
          参加众筹
      </div>
      <div class="confirm-join-c" v-if="showJoinButton"> 
        <div class="join-number"> 
          <div class="title-c">数量</div>
          <div class="right-c"> 
              <span @click="descQuantity">-</span>
              <input v-model="buyNumber">
              <span @click="incQuantity">+</span>
          </div>
         
        </div>
        <div class="confirm-bt" @click="joincrowdFundingProject">确定</div> 
      </div>
  </div>  
</div>
<script src="../js/js/rem_fix.js"></script>
<script src="../js/js/common.js"></script>
<script type="text/javascript">
  var token=getCookie("userToken");
   var userId=getCookie("userId"); 
require(["/js/js/vue_swiper.js"], function (VueSwiper) {
  var projectDetailApp = new Vue({
      el: '#projectDetail',
      components: {
          swiper: VueSwiper
      },
      data: {
          crowdFundingProjectData:'',
          imageList:[],
          isDoingjoin:false,
          token:token,
          userId:userId,
          userRealName:'',
          userTelephone:'',
          showJoinButton:false,
          buyNumber:1
      },
      ready:function(){
        $("#projectDetail").show();        
        var url="/crowdfunding/findOne";
        var crowdFundingProjectId=this.getUrlParam("id");
        var data={
          client:"1",
          id:crowdFundingProjectId
        }
        pushData(url,data,function(res){
          if(res.state){
            console.log(res)
            this.crowdFundingProjectData=res.data.result;
            var imageLists=this.crowdFundingProjectData.images.split(",")
            _.each(imageLists,function(image){
                this.imageList.push({img:image});
            }.bind(this))
          }else{
            alert(res.message)
          }
        }.bind(this));
       this.getUserInfo();
      },
      filters:{
        status: function (key) {
            key = parseInt(key);
            var map = {
                2: "筹备中",
                1: "初始化",
                0: "已关闭",         
                3: "筹备完成",
                5: "筹备结束",
                6: "营业中" ,
                18:"分红中",
                99:"已删除"       
            };
            return map[key];
        },
        formatData:function(key){
          return formatDate(key)
        }
      },
      methods:{
        getProcess:function(){
          var point=this.crowdFundingProjectData.joinNumber/this.crowdFundingProjectData.number;
          var str=Number(point*100).toFixed(1);
          str+="%";
          return str;
          
        },
        joincrowdFundingProject:function(){
          var loginUrl="../userBundle/login.mobile.html"+"?"+"../publicBundle/getCrowdFundingProject.mobile.html#id="+this.crowdFundingProjectData.id;
           if(!this.token||!this.userId){
              window.location.href =loginUrl;
           }
          if(this.isDoingjoin){
            return;
          }
          this.isDoingjoin=true;
          var url="/crowdfunding/saveUser";
          var joinData={
            client: 1,
            crowdfundingId: this.crowdFundingProjectData.id,
            crowdfundingName: this.crowdFundingProjectData.name,
            joinNumber: this.crowdFundingProjectData.joinNumber,
            token: this.token,
            totalPrice: parseInt(this.buyNumber)*this.crowdFundingProjectData.price,
            userId: this.userId,
            userRealName: this.userRealName,
            userTelephone: this.userTelephone
          }
          pushData(url,joinData,function(res){
            this.isDoingjoin=false;
            if(res.state){
              alert("参加成功，等待工作人员与您联系");
              this.showJoinButton=false;
            }else{
              alert(res.message)
            }
          }.bind(this))
        },
        getUserInfo:function(){
          var url="/user/getUserById"
          var data={
            client: 1,
            token: this.token,
            userId: this.userId

          }
          pushData(url,data,function(res){
            if(res.state){
              this.userTelephone=res.data.user.telephone;
              this.userRealName=res.data.user.realName;
            }
          }.bind(this))
        },
        incQuantity:function(){
          this.buyNumber++;
        },
        descQuantity:function(){
          this.buyNumber--;
          if (this.buyNumber < 1) {
              this.buyNumber = 1;
          }
        },
        //paraName 等找参数的名称
    　　 getUrlParam:function(paraName) {
    　　　　var url = document.location.toString();
            if(url.indexOf("?")>-1){
              var arrObj = url.split("?");
            }else{
              var arrObj = url.split("#");
            }
    　　　　
            if (arrObj.length > 1) {
    　　　　　　var arrPara = arrObj[1].split("&");
    　　　　　　var arr;

    　　　　　　for (var i = 0; i < arrPara.length; i++) {
    　　　　　　　　arr = arrPara[i].split("=");

    　　　　　　　　if (arr != null && arr[0] == paraName) {
    　　　　　　　　　　return arr[1];
    　　　　　　　　}
    　　　　　　}
    　　　　　　return "";
    　　　　}
    　　　　else {
    　　　　　　return "";
    　　　　}
    　　　　
    　　 }

      }
    });
});
</script>

</body>
</html>